<template>
	<view class="container bg-fff">
		<view class="list" v-for="(item,index) in list" :key="index" @click="jumpInfo(item.id)">
			<view class="item">
				<view class="flex-space-between item-time">
					<view>{{item.created_at}}</view>
					<view class="flex-align-center">
						<u-icon name="eye" size="28" color="#666666"></u-icon>
						<text>{{item.browse_total | filterQuantity}}</text>
					</view>
				</view>
				<view class="item-con flex">
					<u-image :show-menu-by-longpress="false" width="248rpx" height="248rpx" border-radius="16rpx" :src="item.asset.url"></u-image>
					<view class="item-con-right">
						<view class="item-title u-line-2">{{item.title}}</view>
						<view class="item-synopsis">
							<view>简介：</view>
							<view class="u-line-4">{{item.synopsis}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="list.length <= 0" style="padding: 200rpx 0;">
			<u-empty text="列表为空" mode="list"></u-empty>
		</view>
		<view v-else>
			<b-u-loadmore :status="loadmoreStatus" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				pageForm: {
					type: 1,
					page: 1,
					per_page: 20,
					category_id: 0,
				},
				loadmoreStatus: 'loadmore',
			}
		},
		onLoad() {
			this.getHttp();
		},
		onReachBottom() {
			if(this.loadmoreStatus == 'nomore') {
				return;
			}
			this.pageForm.page++;
			this.getArticle();
		},
		methods: {
			jumpInfo(id) {
				uni.navigateTo({
					url: "/pages/article/article_info?id="+id
				})
			},
			getArticle() {
				this.loadmoreStatus = 'loading';
				uni.$u.api.getArticle(this.pageForm).then(res => {
					let data = getApp().handlePageData(this.list, res, this.pageForm.page);
					this.loadmoreStatus = data.loadmoreStatus;
					this.list = data.list;
				})
			},
			getHttp() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				
				this.getArticle();

				setTimeout(() => {
					uni.hideLoading();
				}, 800)
			},
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 30rpx;
		
		.list {
			
			.item {
				padding: 30rpx 0;
				border-bottom: 1px solid #E5E9EA;
				
				.item-time {
					font-size: 20rpx;
					color: #666666;
				}
				
				.item-con {
					margin-top: 26rpx;
					
					.item-con-right {
						margin-left: 34rpx;
						
						.item-title {
							font-size: 28rpx;
							font-weight: bold;
						}
						
						.item-synopsis {
							margin-top: 16rpx;
							font-size: 20rpx;
							color: #999999;
							line-height: 32rpx;
						}
					}
				}
			}
		}
	}
</style>
